﻿<!DOCTYPE
    html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery-1.5.min.js" ></script>
    <script type="text/javascript" src="js/Rajon.js"></script>    
    <script type="text/javascript" src="ViewModel/Order.js"></script> 
    <script type="text/javascript" src="ViewModel/OrderList.js"></script> 

    <script>

        function showDetail(tag) {           
            var model = Rajon.vmodel(tag).model;            
            Rajon.vmodel('list').selectedOrder = model;            
            Rajon.vmodel('detail').bind();
        }

    </script>    
    
</head>
<body>

    <!-- LIST -->    
    <div id="list" rajon:datacontext="OrderService/Orders"  vModelClass="OrderList" >
        
            <div vModelClass="Order" rajon:isitemview="true">
                 Order: <span rajon:bind="model.OrderNumber#i"></span>        
                 (client <span rajon:bind="model.ClientName"></span>)
                 <a href="#" onclick="showDetail(this)">view details</a>
                 <hr />
            </div>
        
    </div>

    <!-- DETAIL -->
    <div id="detail" rajon:datacontext=">list.selectedOrder" bindsOn="manual">
        OrderNumber: <span rajon:bind="model.OrderNumber"></span><br />        
        Client: <span rajon:bind="model.ClientName"></span><br />  
        
        <table>
            <thead>
            <tr>
                <td>Product</td>
                <td>Price</td>
                <td>Quantity</td>        
            </tr>
            </thead>
            <tbody id="items" rajon:datacontext=">.model.Items" >
        
                        <tr rajon:isitemview="true">
                            <td><span rajon:bind="model.Product"></span></td>
                            <td><span rajon:bind="model.ItemPrice"></span></td>
                            <td><span rajon:bind="model.Quantity"></span></td>            
                        </tr>
        
            </tbody>
        </table>
    </div>

</body>

</html>
